<template>
  <div class="phone-purchase-page">
    <div class="container">
      <!-- 页面头部 -->
      <div class="page-header">
        <h1>📱 手机购买中心</h1>
        <div class="header-actions">
          <el-button type="primary" @click="refreshProducts">刷新商品</el-button>
          <el-button @click="goBack">返回首页</el-button>
        </div>
      </div>

      <!-- 搜索和筛选 -->
      <div class="search-filter">
        <div class="search-box">
          <el-input 
            v-model="searchKeyword" 
            placeholder="搜索手机型号..."
            @input="onSearchInput"
            clearable
            class="search-input"
          >
            <template #prefix>
              <span class="search-icon">🔍</span>
            </template>
          </el-input>
        </div>
        <div class="filter-options">
          <el-select v-model="selectedBrand" @change="filterByBrand" placeholder="选择品牌" clearable class="filter-select">
            <el-option label="苹果" value="苹果" />
            <el-option label="华为" value="华为" />
            <el-option label="小米" value="小米" />
            <el-option label="三星" value="三星" />
            <el-option label="OPPO" value="OPPO" />
            <el-option label="vivo" value="vivo" />
          </el-select>
          <el-select v-model="priceRange" @change="filterByPrice" placeholder="价格区间" clearable class="filter-select">
            <el-option label="0-2000元" value="0-2000" />
            <el-option label="2000-4000元" value="2000-4000" />
            <el-option label="4000-6000元" value="4000-6000" />
            <el-option label="6000元以上" value="6000+" />
          </el-select>
        </div>
      </div>

      <!-- 商品网格 -->
      <div class="products-grid">
        <div 
          v-for="product in filteredProducts" 
          :key="product.id" 
          class="product-card"
          @click="selectProduct(product)"
        >
          <div class="product-image">
            <img :src="product.image" :alt="product.name" />
            <div class="product-badge" v-if="product.stock <= 10">
              <span class="badge-text">库存紧张</span>
            </div>
          </div>
          <div class="product-info">
            <h3 class="product-name">{{ product.name }}</h3>
            <p class="product-description">{{ product.description }}</p>
            <div class="product-specs">
              <span class="spec-item">📱 {{ product.specs?.screen || '6.1英寸' }}</span>
              <span class="spec-item">💾 {{ product.specs?.storage || '128GB' }}</span>
              <span class="spec-item">🎨 {{ product.specs?.color || '深空灰' }}</span>
            </div>
            <div class="product-price">
              <span class="price-symbol">¥</span>
              <span class="price-value">{{ product.price.toLocaleString() }}</span>
            </div>
            <div class="product-stock">
              <span class="stock-label">库存:</span>
              <span class="stock-value" :class="getStockClass(product.stock)">
                {{ product.stock }}台
              </span>
            </div>
            <div class="product-actions">
              <el-button 
                type="primary" 
                size="small" 
                @click.stop="buyNow(product)"
                :disabled="product.stock === 0"
              >
                {{ product.stock === 0 ? '缺货' : '立即购买' }}
              </el-button>
              <el-button 
                type="success" 
                size="small" 
                @click.stop="addToCart(product)"
                :disabled="product.stock === 0"
              >
                加入购物车
              </el-button>
            </div>
          </div>
        </div>
      </div>

      <!-- 分页 -->
      <div class="pagination-wrapper" v-if="totalPages > 1">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="itemsPerPage"
          :page-sizes="[8, 16, 24, 32]"
          :total="totalProducts"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!-- 购买确认弹窗 -->
    <el-dialog 
      v-model="showPurchaseDialog" 
      title="确认购买" 
      width="500px"
      :close-on-click-modal="false"
    >
      <div class="purchase-dialog" v-if="selectedProduct">
        <div class="product-summary">
          <img :src="selectedProduct.image" :alt="selectedProduct.name" class="summary-image" />
          <div class="summary-info">
            <h3>{{ selectedProduct.name }}</h3>
            <p class="summary-description">{{ selectedProduct.description }}</p>
            <div class="summary-specs">
              <span class="spec-item">📱 {{ selectedProduct.specs?.screen || '6.1英寸' }}</span>
              <span class="spec-item">💾 {{ selectedProduct.specs?.storage || '128GB' }}</span>
              <span class="spec-item">🎨 {{ selectedProduct.specs?.color || '深空灰' }}</span>
            </div>
          </div>
        </div>
        
        <div class="purchase-form">
          <div class="form-group">
            <label>购买数量:</label>
            <el-input-number 
              v-model="purchaseQuantity" 
              :min="1" 
              :max="selectedProduct.stock"
              size="large"
            />
          </div>
          
          <div class="form-group">
            <label>收货地址:</label>
            <el-input 
              v-model="shippingAddress" 
              type="textarea" 
              :rows="3"
              placeholder="请输入详细收货地址"
            />
          </div>
          
          <div class="form-group">
            <label>联系电话:</label>
            <el-input 
              v-model="contactPhone" 
              placeholder="请输入联系电话"
            />
          </div>
          
          <div class="price-summary">
            <div class="price-item">
              <span>单价:</span>
              <span>¥{{ selectedProduct.price.toLocaleString() }}</span>
            </div>
            <div class="price-item">
              <span>数量:</span>
              <span>{{ purchaseQuantity }}</span>
            </div>
            <div class="price-item total">
              <span>总计:</span>
              <span>¥{{ (selectedProduct.price * purchaseQuantity).toLocaleString() }}</span>
            </div>
          </div>
        </div>
      </div>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="showPurchaseDialog = false">取消</el-button>
          <el-button type="primary" @click="confirmPurchase" :loading="purchaseLoading">
            确认购买
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 成功消息 -->
    <el-dialog v-model="showSuccessDialog" title="购买成功" width="400px">
      <div class="success-content">
        <div class="success-icon">🎉</div>
        <h3>恭喜您购买成功！</h3>
        <p>订单号: {{ orderNumber }}</p>
        <p>预计3-5个工作日送达</p>
      </div>
      <template #footer>
        <el-button type="primary" @click="showSuccessDialog = false">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { getAllProducts as getAllProductsAPI } from '../services/productApi'

// 响应式数据
const searchKeyword = ref('')
const selectedBrand = ref('')
const priceRange = ref('')
const currentPage = ref(1)
const itemsPerPage = ref(8)

// 购买相关
const showPurchaseDialog = ref(false)
const showSuccessDialog = ref(false)
const selectedProduct = ref<any>(null)
const purchaseQuantity = ref(1)
const shippingAddress = ref('')
const contactPhone = ref('')
const purchaseLoading = ref(false)
const orderNumber = ref('')

// 商品数据
const products = ref([
  {
    id: 1,
    name: 'iPhone 15 Pro',
    description: '苹果最新旗舰手机，搭载A17 Pro芯片，支持5G网络',
    price: 8999,
    stock: 50,
    category: '手机数码',
    image: 'https://images.unsplash.com/photo-1592750475338-74b7b21085ab?w=400',
    specs: {
      screen: '6.1英寸',
      storage: '256GB',
      color: '深空灰'
    }
  },
  {
    id: 2,
    name: 'iPhone 15',
    description: '苹果新一代iPhone，搭载A16芯片，性能强劲',
    price: 5999,
    stock: 80,
    category: '手机数码',
    image: 'https://images.unsplash.com/photo-1592750475338-74b7b21085ab?w=400',
    specs: {
      screen: '6.1英寸',
      storage: '128GB',
      color: '蓝色'
    }
  },
  {
    id: 3,
    name: '华为 Mate 60 Pro',
    description: '华为旗舰手机，搭载麒麟芯片，支持卫星通信',
    price: 6999,
    stock: 30,
    category: '手机数码',
    image: 'https://images.unsplash.com/photo-1592750475338-74b7b21085ab?w=400',
    specs: {
      screen: '6.82英寸',
      storage: '512GB',
      color: '雅川青'
    }
  },
  {
    id: 4,
    name: '小米 14 Pro',
    description: '小米年度旗舰，搭载骁龙8 Gen 3，徕卡光学',
    price: 4999,
    stock: 100,
    category: '手机数码',
    image: 'https://images.unsplash.com/photo-1592750475338-74b7b21085ab?w=400',
    specs: {
      screen: '6.73英寸',
      storage: '256GB',
      color: '钛金属黑'
    }
  },
  {
    id: 5,
    name: '三星 Galaxy S24 Ultra',
    description: '三星顶级旗舰，搭载骁龙8 Gen 3，S Pen支持',
    price: 9999,
    stock: 25,
    category: '手机数码',
    image: 'https://images.unsplash.com/photo-1592750475338-74b7b21085ab?w=400',
    specs: {
      screen: '6.8英寸',
      storage: '512GB',
      color: '钛金灰'
    }
  },
  {
    id: 6,
    name: 'OPPO Find X7 Ultra',
    description: 'OPPO影像旗舰，哈苏影像系统，超长续航',
    price: 5999,
    stock: 60,
    category: '手机数码',
    image: 'https://images.unsplash.com/photo-1592750475338-74b7b21085ab?w=400',
    specs: {
      screen: '6.78英寸',
      storage: '256GB',
      color: '海阔天空'
    }
  },
  {
    id: 7,
    name: 'vivo X100 Pro',
    description: 'vivo影像旗舰，蔡司光学，天玑9300芯片',
    price: 5999,
    stock: 45,
    category: '手机数码',
    image: 'https://images.unsplash.com/photo-1592750475338-74b7b21085ab?w=400',
    specs: {
      screen: '6.78英寸',
      storage: '256GB',
      color: '星迹蓝'
    }
  },
  {
    id: 8,
    name: '一加 12',
    description: '一加年度旗舰，骁龙8 Gen 3，哈苏影像',
    price: 4299,
    stock: 70,
    category: '手机数码',
    image: 'https://images.unsplash.com/photo-1592750475338-74b7b21085ab?w=400',
    specs: {
      screen: '6.82英寸',
      storage: '256GB',
      color: '苍绿'
    }
  }
])

// 定义商品类型
interface Product {
  id: number
  name: string
  description: string
  price: number
  stock: number
  category: string
  image: string
  specs?: {
    screen: string
    storage: string
    color: string
  }
}

// 计算属性
const filteredProducts = computed(() => {
  let filtered = products.value

  // 搜索过滤
  if (searchKeyword.value) {
    filtered = filtered.filter((product: Product) =>
      product.name.toLowerCase().includes(searchKeyword.value.toLowerCase()) ||
      product.description.toLowerCase().includes(searchKeyword.value.toLowerCase())
    )
  }

  // 品牌过滤
  if (selectedBrand.value) {
    filtered = filtered.filter((product: Product) =>
      product.name.includes(selectedBrand.value)
    )
  }

  // 价格过滤
  if (priceRange.value) {
    const [min, max] = priceRange.value.split('-').map(Number)
    filtered = filtered.filter((product: Product) => {
      if (priceRange.value === '6000+') {
        return product.price >= 6000
      }
      return product.price >= min && product.price <= max
    })
  }

  return filtered
})

const paginatedProducts = computed(() => {
  const start = (currentPage.value - 1) * itemsPerPage.value
  const end = start + itemsPerPage.value
  return filteredProducts.value.slice(start, end)
})

const totalProducts = computed(() => filteredProducts.value.length)
const totalPages = computed(() => Math.ceil(filteredProducts.value.length / itemsPerPage.value))

// 方法
const getStockClass = (stock: number) => {
  if (stock === 0) return 'out-of-stock'
  if (stock <= 10) return 'low-stock'
  return 'in-stock'
}

const onSearchInput = () => {
  currentPage.value = 1
}

const filterByBrand = () => {
  currentPage.value = 1
}

const filterByPrice = () => {
  currentPage.value = 1
}

const selectProduct = (product: any) => {
  selectedProduct.value = product
  showPurchaseDialog.value = true
  purchaseQuantity.value = 1
  shippingAddress.value = ''
  contactPhone.value = ''
}

const buyNow = (product: any) => {
  selectProduct(product)
}

const addToCart = (product: any) => {
  ElMessage.success(`已将 ${product.name} 加入购物车`)
}

const confirmPurchase = async () => {
  if (!shippingAddress.value.trim()) {
    ElMessage.error('请输入收货地址')
    return
  }
  
  if (!contactPhone.value.trim()) {
    ElMessage.error('请输入联系电话')
    return
  }

  purchaseLoading.value = true

  try {
    // 模拟购买API调用
    await new Promise(resolve => setTimeout(resolve, 2000))
    
    // 生成订单号
    orderNumber.value = 'ORD' + Date.now()
    
    // 更新库存
    const product = products.value.find((p: Product) => p.id === selectedProduct.value.id)
    if (product) {
      product.stock -= purchaseQuantity.value
    }
    
    showPurchaseDialog.value = false
    showSuccessDialog.value = true
    
    ElMessage.success('购买成功！')
  } catch (error) {
    ElMessage.error('购买失败，请重试')
  } finally {
    purchaseLoading.value = false
  }
}

const refreshProducts = async () => {
  try {
    const result = await getAllProductsAPI()
    if (result.success) {
      // 转换API数据格式
      products.value = result.data.map((item: any) => ({
        id: item.id,
        name: item.name,
        description: item.description || '',
        price: item.price,
        stock: item.stock,
        category: item.category,
        image: item.imageUrl || 'https://images.unsplash.com/photo-1592750475338-74b7b21085ab?w=400',
        specs: {
          screen: '6.1英寸',
          storage: '128GB',
          color: '深空灰'
        }
      }))
      ElMessage.success('商品数据已刷新')
    }
  } catch (error) {
    ElMessage.error('刷新失败，使用本地数据')
  }
}

const goBack = () => {
  const pageManager = (window as any).pageManager
  if (pageManager) {
    pageManager.showHomePage()
  }
}

const handleSizeChange = (size: number) => {
  itemsPerPage.value = size
  currentPage.value = 1
}

const handleCurrentChange = (page: number) => {
  currentPage.value = page
}

onMounted(() => {
  console.log('手机购买页面已加载')
})
</script>



<style scoped>
.phone-purchase-page {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: #f5f5f5;
  min-height: 100vh;
  padding: 20px 0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

/* 页面头部 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding: 20px 0;
  border-bottom: 2px solid #e1e5e9;
}

.page-header h1 {
  font-size: 2.5em;
  color: #333;
  margin: 0;
}

.header-actions {
  display: flex;
  gap: 10px;
}

/* 搜索和筛选 */
.search-filter {
  display: flex;
  gap: 20px;
  margin-bottom: 30px;
  align-items: center;
  flex-wrap: wrap;
}

.search-box {
  flex: 1;
  min-width: 300px;
}

.search-input {
  width: 100%;
}

.search-icon {
  font-size: 16px;
}

.filter-options {
  display: flex;
  gap: 15px;
}

.filter-select {
  min-width: 150px;
}

/* 商品网格 */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 25px;
  margin-bottom: 40px;
}

.product-card {
  background: white;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
  cursor: pointer;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.product-image {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.product-card:hover .product-image img {
  transform: scale(1.05);
}

.product-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #ff6b6b;
  color: white;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

.product-info {
  padding: 20px;
}

.product-name {
  font-size: 1.2em;
  font-weight: 600;
  color: #333;
  margin: 0 0 10px 0;
}

.product-description {
  color: #666;
  font-size: 14px;
  margin: 0 0 15px 0;
  line-height: 1.4;
}

.product-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 15px;
}

.spec-item {
  background: #f8f9fa;
  color: #666;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
}

.product-price {
  display: flex;
  align-items: baseline;
  margin-bottom: 10px;
}

.price-symbol {
  font-size: 16px;
  color: #ff6b6b;
  font-weight: 600;
}

.price-value {
  font-size: 1.5em;
  color: #ff6b6b;
  font-weight: 700;
  margin-left: 2px;
}

.product-stock {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 15px;
}

.stock-label {
  font-size: 14px;
  color: #666;
}

.stock-value {
  font-weight: 600;
}

.stock-value.in-stock {
  color: #28a745;
}

.stock-value.low-stock {
  color: #ffc107;
}

.stock-value.out-of-stock {
  color: #dc3545;
}

.product-actions {
  display: flex;
  gap: 10px;
}

/* 分页 */
.pagination-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

/* 购买弹窗 */
.purchase-dialog {
  padding: 20px 0;
}

.product-summary {
  display: flex;
  gap: 20px;
  margin-bottom: 30px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 10px;
}

.summary-image {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 8px;
}

.summary-info h3 {
  margin: 0 0 10px 0;
  color: #333;
}

.summary-description {
  color: #666;
  margin: 0 0 15px 0;
  font-size: 14px;
}

.summary-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.purchase-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group label {
  font-weight: 600;
  color: #333;
}

.price-summary {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 10px;
  margin-top: 20px;
}

.price-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.price-item.total {
  border-top: 1px solid #dee2e6;
  padding-top: 10px;
  font-weight: 700;
  font-size: 1.1em;
  color: #ff6b6b;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* 成功弹窗 */
.success-content {
  text-align: center;
  padding: 20px;
}

.success-icon {
  font-size: 3em;
  margin-bottom: 20px;
}

.success-content h3 {
  color: #28a745;
  margin: 0 0 15px 0;
}

.success-content p {
  color: #666;
  margin: 5px 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }
  
  .page-header h1 {
    font-size: 2em;
  }
  
  .search-filter {
    flex-direction: column;
    align-items: stretch;
  }
  
  .products-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
  }
  
  .product-summary {
    flex-direction: column;
    text-align: center;
  }
  
  .filter-options {
    flex-direction: column;
    gap: 10px;
  }
  
  .filter-select {
    min-width: auto;
  }
  
  .product-actions {
    flex-direction: column;
    gap: 8px;
  }
  
  .product-actions .el-button {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 10px;
  }
  
  .page-header h1 {
    font-size: 1.8em;
  }
  
  .products-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .product-card {
    margin: 0 10px;
  }
  
  .product-info {
    padding: 15px;
  }
  
  .product-name {
    font-size: 1.1em;
  }
  
  .product-description {
    font-size: 13px;
  }
  
  .product-specs {
    gap: 6px;
  }
  
  .spec-item {
    font-size: 11px;
    padding: 3px 6px;
  }
  
  .price-value {
    font-size: 1.3em;
  }
  
  .search-filter {
    gap: 15px;
  }
  
  .search-box {
    min-width: auto;
  }
  
  .filter-options {
    gap: 8px;
  }
  
  .filter-select {
    font-size: 14px;
  }
  
  .pagination-wrapper {
    margin-top: 30px;
  }
  
  .pagination-wrapper .el-pagination {
    font-size: 14px;
  }
  
  .purchase-dialog {
    padding: 15px 0;
  }
  
  .product-summary {
    padding: 15px;
    gap: 15px;
  }
  
  .summary-image {
    width: 80px;
    height: 80px;
  }
  
  .summary-info h3 {
    font-size: 1.1em;
  }
  
  .summary-description {
    font-size: 13px;
  }
  
  .purchase-form {
    gap: 15px;
  }
  
  .form-group {
    gap: 6px;
  }
  
  .form-group label {
    font-size: 14px;
  }
  
  .price-summary {
    padding: 15px;
  }
  
  .price-item {
    font-size: 14px;
  }
  
  .price-item.total {
    font-size: 1em;
  }
  
  .dialog-footer {
    gap: 8px;
  }
  
  .dialog-footer .el-button {
    padding: 8px 16px;
    font-size: 14px;
  }
  
  .success-content {
    padding: 15px;
  }
  
  .success-icon {
    font-size: 2.5em;
  }
  
  .success-content h3 {
    font-size: 1.2em;
  }
  
  .success-content p {
    font-size: 14px;
  }
}

/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
  .phone-purchase-page {
    background-color: #1a1a1a;
    color: #ffffff;
  }
  
  .product-card {
    background: #2d2d2d;
    color: #ffffff;
  }
  
  .product-name {
    color: #ffffff;
  }
  
  .product-description {
    color: #cccccc;
  }
  
  .spec-item {
    background: #3d3d3d;
    color: #cccccc;
  }
  
  .stock-label {
    color: #cccccc;
  }
  
  .page-header {
    border-bottom-color: #3d3d3d;
  }
  
  .page-header h1 {
    color: #ffffff;
  }
  
  .search-filter {
    background: #2d2d2d;
  }
  
  .purchase-dialog {
    background: #2d2d2d;
  }
  
  .product-summary {
    background: #3d3d3d;
  }
  
  .summary-info h3 {
    color: #ffffff;
  }
  
  .summary-description {
    color: #cccccc;
  }
  
  .price-summary {
    background: #3d3d3d;
  }
  
  .success-content h3 {
    color: #4caf50;
  }
  
  .success-content p {
    color: #cccccc;
  }
}

/* 动画效果增强 */
.product-card {
  animation: fadeInUp 0.6s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.product-card:nth-child(1) { animation-delay: 0.1s; }
.product-card:nth-child(2) { animation-delay: 0.2s; }
.product-card:nth-child(3) { animation-delay: 0.3s; }
.product-card:nth-child(4) { animation-delay: 0.4s; }
.product-card:nth-child(5) { animation-delay: 0.5s; }
.product-card:nth-child(6) { animation-delay: 0.6s; }
.product-card:nth-child(7) { animation-delay: 0.7s; }
.product-card:nth-child(8) { animation-delay: 0.8s; }

/* 加载动画 */
.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 滚动条样式 */
.phone-purchase-page::-webkit-scrollbar {
  width: 8px;
}

.phone-purchase-page::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.phone-purchase-page::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

.phone-purchase-page::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* 焦点样式 */
.product-card:focus {
  outline: 2px solid #3498db;
  outline-offset: 2px;
}

.el-button:focus {
  outline: 2px solid #3498db;
  outline-offset: 2px;
}

/* 无障碍支持 */
@media (prefers-reduced-motion: reduce) {
  .product-card,
  .product-card:hover,
  .product-image img,
  .product-card:hover .product-image img {
    transition: none;
    animation: none;
  }
}

/* 高对比度模式 */
@media (prefers-contrast: high) {
  .product-card {
    border: 2px solid #000000;
  }
  
  .product-badge {
    border: 1px solid #ffffff;
  }
  
  .spec-item {
    border: 1px solid #000000;
  }
  
  .price-summary {
    border: 2px solid #000000;
  }
}
</style>